<template>
  <div>
    <div style="height: 200px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="10" :md="6" class="col-bottom">
          <CommonCard title="今日销售额" :value="homeData.salesToday">
            <div>
              日同比 {{ homeData.salesGrowthLastDay }}
              <el-icon><CaretBottom style="color: red" /></el-icon>
            </div>
            <div>
              月同比 {{ homeData.salesGrowthLastMonth
              }}<el-icon><CaretTop style="color: green" /></el-icon>
            </div>
            <template #footer>
              <div>昨日销售额¥ {{ homeData.salesLastDay }}</div>
            </template>
          </CommonCard>
        </el-col>
        <el-col :xs="24" :sm="10" :md="6" class="col-bottom">
          <CommonCard title="今日订单" :value="homeData.salesToday">
            <LineChart
              :orderTrend="homeData.orderTrend"
              :orderTrendAxis="homeData.orderTrendAxis"
            />
            <template #footer>
              <div>昨日订单量¥ {{ homeData.orderToday }}</div>
            </template>
          </CommonCard>
        </el-col>
        <el-col :xs="24" :sm="10" :md="6" class="col-bottom">
          <CommonCard title="今日交易用户数" :value="homeData.orderUser">
            <BarChart
              :orderUserTrend="homeData.orderUserTrend"
              :orderUserTrendAxis="homeData.orderUserTrendAxis"
            />
            <template #footer>
              <div>退货率{{ homeData.returnRate }}%</div>
            </template>
          </CommonCard>
        </el-col>
        <el-col :xs="24" :sm="10" :md="6" class="col-bottom">
          <CommonCard title="累计用户数" :value="homeData.usersTotal">
            <ProgressChart :usersLastMonth="homeData.usersLastMonth" />
            <template #footer>
              <span>
                日同比 {{ homeData.userGrowthLastDay
                }}<el-icon><CaretTop style="color: green" /></el-icon> 月同比
                {{ homeData.userGrowthLastMonth
                }}<el-icon><CaretBottom style="color: red" /></el-icon>
              </span>
            </template>
          </CommonCard>
        </el-col>
      </el-row>
    </div>
    <SalesVisited
      :orderFullYearAxis="homeData.orderFullYearAxis"
      :orderFullYear="homeData.orderFullYear"
      :userFullYearAxis="homeData.userFullYearAxis"
      :userFullYear="homeData.userFullYear"
    />
    <PieChart />
    <ChinaMap />
    <BMap />
  </div>
</template>

<script lang="ts">
export default {
  name: "xHome",
};
</script>
<script lang="ts" setup>
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import CommonCard from "./components/common-card.vue";
import LineChart from "./components/line-chart.vue";
import BarChart from "./components/bar-chart.vue";
import ProgressChart from "./components/progress-chart.vue";
import SalesVisited from "./components/sales-visited.vue";
import PieChart from "./components/pie-chart.vue";
import ChinaMap from "./components/china-map.vue";
import BMap from "./components/b-map.vue";
import { onMounted, ref } from "vue";
import { getHomeDataApi } from "@/api/mock/home";

const homeData = ref<any>({
  orderTrend: [],
  orderTrendAxis: [],
  orderUserTrend: [],
  orderUserTrendAxis: [],
  orderFullYearAxis: [],
  orderFullYear: [],
  userFullYearAxis: [],
  userFullYear: [],
  salesToday: 0,
  orderToday: 0,
  orderUser: 0,
  usersTotal: 0,
  usersLastMonth: 0,
  orderRank: [],
  salesGrowthLastDay: 0,
  salesGrowthLastMonth: 0,
  salesLastDay: 0,
  orderLastDay: 0,
  userGrowthLastDay: 0,
  userGrowthLastMonth: 0,
});
onMounted(async () => {
  homeData.value = await getHomeDataApi();
});
</script>

<style scoped>
.col-bottom {
  margin-bottom: 10px;
  height: 50px;
}
</style>
